<template>
  <div v-if="result">
    <BHeader :keyword="kw" />
    <div class="category">
      <ul class="cateUl">
        <li
          v-for="(item, index) in category"
          :key="index"
          :class="{ curtype: curType == index }"
          @mouseover="curType = 100"
          @mouseleave="curType = curTypeStill"
          @click="
            curType = index;
            curTypeStill = index;
          "
        >
          {{ item }} <span>{{ resRecord.length }}</span>
        </li>
      </ul>
      <div class="sort">
        <ul>
          <li
            v-for="(item, index) in sort1"
            :key="index"
            :class="{ on: curSort1 == index, sort1_hover: curSort1 !== index }"
            @click="curSort1 = index"
          >
            {{ item }}
          </li>
          <li @click="showMore = !showMore">
            <div v-show="!showMore">
              更多筛选<i class="el-icon-arrow-down"></i>
            </div>
            <div v-show="showMore" style="color: #6d757a">
              收起<i class="el-icon-arrow-up"></i>
            </div>
          </li>
        </ul>
        <div class="hiddenUls" v-show="showMore">
          <ul>
            <li
              v-for="(item, index) in sort2"
              :key="index"
              :class="{
                on: curSort2 == index,
                sort1_hover: curSort2 !== index,
              }"
              @click="curSort2 = index"
            >
              {{ item }}
            </li>
          </ul>
          <ul>
            <li
              v-for="(item, index) in sort3"
              :key="index"
              :class="{
                on: curSort3 == index,
                sort1_hover: curSort3 !== index,
              }"
              @click="curSort3 = index"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <div class="video" v-if="resRecord.length">
        <div class="video_wrap" v-for="(item, index) in result" :key="index" @click="jumpToVideo(item.id)">
          <div style="position: relative">
            <img :src="`/img/${item.image}`" alt="" class="v_img" />
            <div class="timeMask">{{ item.totalTime }}</div>
          </div>
          <div class="v_info">
            <p v-html="item.name" class="v_tit"></p>
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
              "
            >
              <div class="info_inner">
                <i class="el-icon-video-play"></i> {{ item.play | playFil }}
              </div>
              <div class="info_inner">
                <i class="el-icon-time"></i>{{ item.time }}
              </div>
              <div style="margin-top: 6px">
                <i class="el-icon-user"></i>{{ item.uname }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="paginate" v-if="resRecord.length">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="Math.ceil(result.length / 20)"
      >
      </el-pagination>
    </div>
      <div class="noVideo" v-else>
        <img src="/img/noVideo.png" alt="" />
      </div>
    </div>

    <BFooter />
  </div>
</template>

<script>
import BHeader from "../components/BHeader.vue";
import BFooter from "../components/BFooter.vue";
export default {
  components: { BHeader, BFooter },
  props: ["kw"],
  data() {
    return {
      result: null,
      resRecord:[],
      category: [
        "综合",
        "视频",
        "番剧",
        "影视",
        "直播",
        "专栏",
        "话题",
        "用户",
      ],
      sort1: ["综合排序", "最多点击", "最新发布", "最多弹幕", "最多收藏"],
      sort2: ["全部时长", "10分钟以下", "10-30分钟", "30-60分钟", "60分钟以上"],
      sort3: [
        "全部分区",
        "动画",
        "番剧",
        "国创",
        "音乐",
        "舞蹈",
        "游戏",
        "知识",
        "科技",
        "运动",
        "汽车",
        "生活",
        "美食",
        "动物圈",
        "鬼畜",
        "时尚",
        "资讯",
        "娱乐",
        "影视",
        "纪录片",
        "电影",
        "电视剧",
      ],
      curSort1: 0,
      curSort2: 0,
      curSort3: 0,
      curType: 0,
      curTypeStill: 0,
      showMore: false,
    };
  },
  methods: {
    getResult() {
      this.axios.get(`http://${location.host}/comics/data/search.json`).then((res) => {
        console.log(res);
        let keyw = [];
        let result=[];
        // let result = res.data;
        res.data.forEach((item, i) => {
          if (item.name.indexOf(this.kw) !== -1) {
            let index = item.name.indexOf(this.kw);
            this.resRecord.push(index)
            keyw = item.name.split("");
            keyw.splice(
              index,
              this.kw.length,
              `<span style="color:#f25d8e !important;">${this.kw}</span>`
            );
            keyw = keyw.join("");
            result[result.length]=res.data[i]
            result[result.length-1].name = keyw;
          } else {
            // result[i].name = item.name;
          }
        });
        // console.log(result);
        this.result = result;
      });
    },
    jumpToVideo(vid){
      // console.log(11);
      this.$router.push(`/video/${this.kw}/${vid}`)
    },
    changeTitle(){
      document.title=`${this.kw}_搜索结果_可米克斯动漫`
    }
  },
  filters: {
    //数量过滤器
    playFil(val) {
      let num_w = val / 1000;
      if (num_w >= 10) {
        return Math.floor(num_w) / 10 + "万";
      }
      return val;
    },
  },
  mounted() {
    this.changeTitle()
    this.getResult();
  },
  watch: {
    $route(nVal) {
      this.resRecord=[]
      this.getResult();
    },
  },
};
</script>
<style>
.paginate {
  width: 100px !important;
  margin:20px  auto ;
}
</style>
<style lang="scss" scoped>
.category {
  .cateUl {
    width: 1026px;
    margin: 0 auto;
  }
  .sort {
    width: 980px;
    margin: 0 auto;
  }
  .noVideo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    height: 320px;
  }
  .video {
    width: 980px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .video_wrap {
      width: 168px;
      height: 208px;
      box-sizing: border-box;
      margin-top: 20px;
      margin-right: 32px;
      border: 1px solid #e5e9ef;
      border-radius: 4px;
      .timeMask {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        border-top-left-radius: 6px;
      }
      .v_info {
        padding: 8px 11px 0;
        color: #99a2aa;
      }
      .v_tit {
        color: black;
        margin-bottom: 8px;
        height: 32px;
      }
      .info_inner {
        margin: 0 8px 0px 0;
      }
    }
    & > .video_wrap:nth-child(5n) {
      margin-right: 0;
    }
    .v_img {
      width: 168px;
      border-radius: 4px;
    }
  }
  .cateUl {
    display: flex;
    flex-direction: row;
    height: 56px;
    box-sizing: border-box;
    border-bottom: #ccd0d7 1px solid;
    user-select: none;
    cursor: pointer;
    li {
      width: 128px;
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      transform: 2s ease-in-out linear;
      span {
        font-size: 12px;
        color: #999;
      }
      &:hover {
        border-bottom: #00a1d6 1px solid;
        color: #00a1d6;
      }
    }
  }
  .sort {
    margin-top: 20px;
    user-select: none;
    cursor: pointer;
    .hiddenUls {
      border-bottom: #ccd0d7 1px solid;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 4px;
      li {
        padding: 8px;
        margin-right: 15px;
      }
      li.on {
        background-color: #00a1d6;
        color: white;
        border-radius: 4px;
      }
      .sort1_hover:hover {
        color: #00a1d6;
        cursor: pointer;
      }
      li.last {
        color: #999;
        margin-left: 30px;
      }
    }
  }
}
.curtype {
  border-bottom: #00a1d6 1px solid;
  color: #00a1d6;
}
</style>
